import { getToken } from '@/utils/storage'
import Vue from 'vue'
import VueRouter from 'vue-router'
import { Toast } from 'vant'

// 静态导入，index.js 被 main.js 导入时，就会导入这些页面组件内容
// import Register from '@/views/Register.vue'
// import Login from '@/views/Login.vue'
// import Layout from '@/views/Layout.vue'
// import Detail from '@/views/Detail.vue'
// import HomeArticle from '@/views/HomeArticle.vue'
// import HomeCollect from '@/views/HomeCollect.vue'
// import HomeLike from '@/views/HomeLike.vue'
// import HomeUser from '@/views/HomeUser.vue'

Vue.use(VueRouter)

// // 静态路由配置
// const routes = [
//   // 重定向
//   { path: '/', redirect: '/article' },
//   // 注册
//   { name: 'RegisterPage', path: '/register', component: Register },
//   // 登录
//   // { name: 'LoginPage', path: '/login', component: Login },
//   // 登录，路由懒加载（动态导入：把 import 当作一个函数调用 ）
//   // 路由懒加载逻辑：当用户访问该路由，才会执行 component 函数，才会执行 import 函数，才会导入登录页面组件的内容
//   // 路由懒加载注意：component 必须是一个函数，这个函数由 VueRouter 自动去调用
//   // 路由懒加载的好处：只有当访问这个路由时，才会去加载对应的组件内容，那么首次加载时，内容就少，速度就更快
//   { name: 'LoginPage', path: '/login', component: () => import('@/views/Login.vue') },
//   // {
//   //   name: 'LoginPage',
//   //   path: '/login',
//   //   component: () => {
//   //     return import('@/views/Login.vue')
//   //   }
//   // },
//   // 首页（布局）
//   {
//     name: 'LayoutPage',
//     path: '/layout',
//     component: Layout,
//     children: [
//       // 面经
//       { name: 'HomeArticlePage', path: '/article', component: HomeArticle },
//       // 收藏
//       { name: 'HomeCollectPage', path: '/collect', component: HomeCollect },
//       // 喜欢
//       { name: 'HomeLikePage', path: '/like', component: HomeLike },
//       // 我的
//       { name: 'HomeUserPage', path: '/user', component: HomeUser }
//     ]
//   },
//   // 面经详情
//   { name: 'DetailPage', path: '/detail', component: Detail }
// ]

// 路由懒加载（动态导入）配置
const routes = [
  // 重定向
  { name: 'root', path: '/', redirect: '/article' },
  // 注册
  { name: 'RegisterPage', path: '/register', component: () => import('@/views/Register.vue') },
  // 登录
  { name: 'LoginPage', path: '/login', component: () => import('@/views/Login.vue') },
  // 首页（布局）
  {
    name: 'LayoutPage',
    path: '/layout',
    component: () => import('@/views/Layout.vue'),
    children: [
      // 面经
      { name: 'HomeArticlePage', path: '/article', component: () => import('@/views/HomeArticle.vue') },
      // 收藏
      { name: 'HomeCollectPage', path: '/collect', component: () => import('@/views/HomeCollect.vue') },
      // 喜欢
      { name: 'HomeLikePage', path: '/like', component: () => import('@/views/HomeLike.vue') },
      // 我的
      {
        name: 'HomeUserPage',
        path: '/user',
        component:
    () => import('@/views/HomeUser.vue')
      }
    ]
  },
  // 面经详情
  { name: 'DetailPage', path: '/detail/:id', component: () => import('@/views/Detail.vue') }
]

// 创建路由器实例
const router = new VueRouter({
  routes
})

// 注册前置路由守卫
// to: 你要去哪里？
// from: 你从哪里来？
// next: 是否放你过去
//  - next(): 放行
//  - next(path)、next({ name }): 让你指定的地方，和 this.$router.push 参数一样
//  - 不调用，或者 next(false): 不放行
router.beforeEach((to, from, next) => {
  // console.log(to)
  // console.log(from)
  // console.log(next)
  // 进入守卫处理函数，就说明用户在跳转路由
  // 可以从 to 对象中获取要去的目的地
  // 可以通过 next 来控制是否放行

  // 如果没登录，并且访问的不是登录和注册页面，那么就拦截强制去登录
  // 如何知道有没有登录？就看有没有token

  const token = getToken() // 获取token
  // 没有token（没有登录）
  if (!token) {
    // if (to.name === 'LoginPage' || to.name === 'RegisterPage') {
    // 是不是去登录页和注册页
    if (['LoginPage', 'RegisterPage'].includes(to.name)) {
      next() // 放行
    } else {
      Toast('请先登录！')
      next({ name: 'LoginPage' }) // 去登录
    }
  } else { // 登陆了
    next() // 放行
  }
})

// 一定要找对人，路由的守卫是拦截路由的，我们现在是要拦截请求

export default router
